<template>
    <div class="login">
        <el-card>
            <!-- <template #header>
                <div class="card-header">
                    <span>登录</span>
                </div>
            </template> -->
            <el-form label-width="60px">
                <el-form-item label="用户名">
                    <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="btnLogin">登录</el-button>
                    <el-button @click="btnCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter();

const user = reactive({
    username: '',
    password: ''
})

// 取消
const btnCancel = function () {
    console.log(111);

}
// 登录
const btnLogin = function () {
    console.log(user);
    // location.href = '/'
    router.push('/')
}
</script>
<style scoped>
.login {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgba(139, 139, 139, 0.336);
}

.el-card {
    width: 360px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>